<!--
 * @Author: xcl
 * @Date: 2022-03-18 15:39:40
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-14 09:47:40
 * @Description: 图片打点功能（2D）、2d高清图片实时渲染坑位状态和报警指示图标
-->
<template>
  <div id="ImageScene" class="myCanvasBox">
    <img
      class="canvas"
      @click="canvasEvent"
      :src="$common.resources + '/images/index/2D.png'"
    />
    <img
      class="point"
      ref="occupyPoint"
      :src="$common.resources + '/images/index/point.svg'"
    />

    <div v-for="(item, index) in pits" :key="'status-' + item.number">
      <img
        class="point"
        v-if="SpritePositions_status_2d && SpritePositions_status_2d.length > 0"
        :style="{
          left: SpritePositions_status_2d[index][0] * 100 + '%',
          top: SpritePositions_status_2d[index][1] * 100 + '%',
        }"
        :src="
          $common.resources +
          '/images/index/' +
          ['Idle', 'occupy', 'repair', 'Not'][item.state] +
          '.png'
        "
      />
    </div>

    <div v-for="(item, index) in pits" :key="'alarm-' + item.number">
      <img
        class="point"
        v-if="
          item.alarmState == 2 &&
          SpritePositions_alarm_2d &&
          SpritePositions_alarm_2d.length > 0
        "
        :style="{
          left: SpritePositions_alarm_2d[index][0] * 100 + '%',
          top: SpritePositions_alarm_2d[index][1] * 100 + '%',
        }"
        :src="$common.resources + '/images/index/alarm.png'"
      />
    </div>
  </div>
</template>

<script>
import { data } from "../scenes/data"; // 模型的数据源
export default {
  name: "ImageScene",
  components: {},
  data() {
    return {
      SpritePositions_status_2d: [],
      SpritePositions_alarm_2d: [],
    };
  },
  props: ["pits", "toiletNo"],
  watch: {},
  created() {},
  mounted() {
    this.SpritePositions_status_2d = data[this.toiletNo]
      ? data[this.toiletNo]["SpritePositions_status_2d"]
      : [];
    this.SpritePositions_alarm_2d = data[this.toiletNo]
      ? data[this.toiletNo]["SpritePositions_alarm_2d"]
      : [];
  },
  methods: {
    canvasEvent: function (e) {
      var iconWidth = 58;
      var iconHeight = 73;
      let canvas = document.getElementsByClassName("canvas")[0];
      let X = ((e.layerX || e.offsetX) - iconWidth / 2) / canvas.width;
      let Y = ((e.layerY || e.offsetY) - iconHeight) / canvas.height;
      let style =
        "transition: 0.3s;" +
        "position: absolute;" +
        "left:" +
        X * 100 +
        "%;" +
        "top:" +
        Y * 100 +
        "%;" +
        "width:" +
        iconWidth / 100 +
        "rem;";
      let XY = [X, Y];

      console.log(style, XY);
      this.$message({
        showClose: false,
        duration: 6 * 1000,
        message: XY,
        type: "success",
      });
      this.$refs.occupyPoint.style = style;
    },
  },
};
</script>

<style scoped lang="less">
#ImageScene {
  width: 100%;
  height: 100%;
  position: relative;
  .canvas {
    width: 100%;
    height: 100%;
  }
  .point {
    transition: 0.3s;
    position: absolute;
    left: -999rem;
    top: -999rem;
    width: 0.58rem;
  }
}
</style>

